<template>
  <a-modal
    title="查询"
    :width="1024"
    :visible="visible"
    :confirmLoading="loading"
    @ok="modalOk"
    @cancel="() => { $emit('cancel') }"
  >
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="24" :sm="24">
              <a-form-item label="地点">
                <!-- :not-found-content="fetching ? undefined : null" -->
                <a-select
                  show-search
                  :value="value"
                  placeholder="请输入地点"
                  style="width: 100%"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="null"
                  @search="onSearch"
                  @change="onChange"
                >
                  <!-- <a-spin v-if="fetching" slot="notFoundContent" size="small" /> -->
                  <a-select-option v-for="(item, index) in searchList" :key="index">
                    {{ item.roadName }}
                    <p style="font-size: 14px !important; color: #666 !important;">
                      门牌范围：{{ item.houseNumber }}
                    </p>
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row v-if="nowSelect">
            <a-col :span="12">
              匹配成功！
              <p>
                投递站： <span v-text="nowSelect.deliveryStation.name"></span>
              </p>
              <p>
                投递段： <span v-text="nowSelect.deliveryStation.deliveryPart"></span>
              </p>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
  </a-modal>
</template>

<script>
import { getDeliveryDetailLists } from '@/api/manage'
import { STable } from '@/components'
export default {
  name: 'MatchDelivery',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    }
    // model: {
    //   type: Object,
    //   default: () => null
    // }
  },
  data () {
    return {
      value: '',
      searchList: [],
      nowSelect: null,
      model: {},
      rowSelection: {
        type: 'radio',
        onSelect: (record, selected, selectedRows, nativeEvent) => {
          this.onSelect(record, selected, selectedRows, nativeEvent)
        }
      },
      detailOnlyVisible: false,
      bandTickVisible: false,
      detailVisible: false,
      deliveryVisible: false,
      queryParam: {},
      departmentList: []
    }
  },
  components: {
    STable
  },
  created () {
    // this.init()
  },
  methods: {
    onSearch (value) {
      getDeliveryDetailLists({ search: value }).then(res => {
        // this.searchList = ['123']
        this.searchList = res.data
      }).catch(e => {
        console.error(e)
      })
    },
    onChange (value) {
      this.value = this.searchList[value].roadName
      this.nowSelect = this.searchList[value]
    },
    onSelect (record, selected, selectedRows, nativeEvent) {
      console.log(record)
      this.value = record.roadName
      // this.nowSelect = record
    },
    toDetailOnly (record) {
      this.model = record
      this.detailOnlyVisible = true
    },
    toDeliveryDetail (record) {
      this.model = record
      this.deliveryVisible = true
    },
    toBandTicket (record) {
      this.model = record
      this.bandTickVisible = true
    },
    modalOk () {
      this.$emit('OnSelect', this.nowSelect)
      // this.model = {}
      // this.detailVisible = false
      // this.bandTickVisible = false
      // this.$refs.table.refresh(false)
    },
    init () {
    },
    toAdd () {
      this.model = {}
      this.detailVisible = true
    },
    toDetail (record) {
      this.model = record
      this.detailVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
